/**报名 */
import React, { useState } from 'react';
import {
  Collapse,
  Form,
  DatePicker,
  Input,
  Row,
  Col,
  Space,
  Button,
} from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import styles from './index.less';
import Tagscom from '@/Components/Tagscom';
const { Panel } = Collapse;
const { RangePicker }: { RangePicker: any } = DatePicker;

const tagsData = [
  '姓名',
  '性别',
  '图片',
  '手机号',
  '生日',
  'QQ号',
  '邮箱',
  '学院',
  '年级',
  '班级',
  '学号',
  '特长',
  '备注',
];
const SignUp = (props: { SignUpForm: any }) => {
  const { SignUpForm } = props;
  return (
    <div>
      <Collapse
        className={styles['site-collapse-custom-collapse']}
        defaultActiveKey={['SignUp']}
      >
        <Panel
          header="报名"
          key="SignUp"
          className={styles['site-collapse-custom-panel']}
        >
          <Form
            form={SignUpForm}
            name="1"
            initialValues={{ remember: true }}
            autoComplete="off"
            layout="vertical"
          >
            <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 30 }}>
              基本信息
            </div>
            <Row>
              <Col span={12}>
                <Form.Item
                  label="活动时间"
                  name="signUpDate"
                  rules={[
                    { required: true, message: 'Please input your username!' },
                  ]}
                >
                  <RangePicker showTime style={{ width: 400 }} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item label="报名人数" name="numberLimit">
                  <Input placeholder="不填充即无限" style={{ width: 400 }} />
                </Form.Item>
              </Col>
            </Row>
            <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 30 }}>
              选择您希望活动参加者填写的信息
            </div>
            <Form.Item
              name="requiredEntryForms"
              rules={[
                { required: true, message: 'Please input your username!' },
              ]}
            >
              <Tagscom tagsData={tagsData} value={[]} onChange={undefined} />
            </Form.Item>

            <div style={{ fontSize: 14, fontWeight: 700, marginBottom: 30 }}>
              可添加补充项目
            </div>
            <Form.Item
              label="项目名称"
              name="optionalEntryForms"
              rules={[{ required: true, message: 'Missing first name' }]}
            >
              <Input
                style={{ width: 400, marginRight: 10 }}
                placeholder="请输入日程名称"
              />
            </Form.Item>
            <Form.List name="signUp">
              {(fields, { add, remove }) => (
                <>
                  {fields.map(({ key, name, ...restField }) => (
                    <div key={key}>
                      <Space
                        style={{
                          display: 'flex',
                          marginBottom: 8,
                        }}
                        align="baseline"
                        className={styles['delete-style']}
                      >
                        <Form.Item
                          label="项目名称"
                          {...restField}
                          name={[name, 'optionalEntryForms']}
                          rules={[
                            { required: true, message: 'Missing first name' },
                          ]}
                        >
                          <Input
                            style={{ width: 400, marginRight: 10 }}
                            placeholder="请输入日程名称"
                          />
                        </Form.Item>
                        <DeleteOutlined
                          className={styles['delete-style']}
                          onClick={() => remove(name)}
                          style={{ color: 'red ' }}
                        />
                      </Space>
                    </div>
                  ))}
                  <Form.Item>
                    <Button
                      type="dashed"
                      onClick={() => add()}
                      block
                      icon={<PlusOutlined />}
                      style={{ width: 400 }}
                    >
                      添加
                    </Button>
                  </Form.Item>
                </>
              )}
            </Form.List>
          </Form>
        </Panel>
      </Collapse>
    </div>
  );
};
export default SignUp;
